<template>
  <div class="pick_wrap">
    <!-- 由于是移动端，所以accept暂时写死 -->
    <van-uploader
      v-model="fileList"
      :class="identClass"
      accept="image/*, .pdf"
      :after-read="afterRead"
      :max-size="maxSize * 1024 * 1024"
      delete
      :multiple="multiple"
      :max-count="maxLen"
      :disabled="isDisabled"
      :deletable="isDeletable"
      @oversize="onOversize"
      @delete="deleteFile"
    >
      <div class="picker">+</div>
    </van-uploader>
  </div>
</template>

<script>
import { uploadFile } from '@/api/base'
export default {
  name: 'fileUpload',
  props: {
    // 文件上传大小
    maxSize: {
      type: Number, // 单位兆
      default: 10
    },
    // 是否开启图片多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 文件上传最大个数
    maxLen: {
      type: Number,
      default: 5
    },
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    deletable: {
      type: Boolean,
      default: true
    },
    onlyRead: {
      type: Boolean,
      default: false
    },
    imgId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      isDisabled: false,
      isDeletable: true,
      identClass: 'class' + parseInt(Math.random() * 1000000)
    }
  },
  watch: {
    value(n, o) {
      if (n) {
        this.fileList = []
        this.fileList = [...this.value]
        this.fileList.forEach((file) => {
          if (!file.url) {
            file.url =
              '/manage/file/uploadFile.do?action=previewAsImage&fileId=' +
              file.fileId
          }
          file.isImage = true
        })
      }
    }
  },
  created() {
    this.fileList = [...this.value]
  },
  mounted() {
    this.init()
    if (this.imgId) {
      this.fileList.push({
        fileId: this.imgId,
        fileName: '',
        url:
          '/manage/file/uploadFile.do?action=previewAsImage&fileId=' +
          this.imgId,
        isImage: true
      })
      // this.isDisabled = true
      // this.isDeletable = false
      // document.querySelector(
      //   `.${this.identClass} .van-uploader__input-wrapper`
      // ).style.display = 'none'
    }
  },
  methods: {
    init() {
      this.isDisabled = this.disabled
      this.isDeletable = this.deletable
      if (this.onlyRead) {
        this.isDisabled = true
        this.isDeletable = false
        document.querySelector(
          `.${this.identClass} .van-uploader__input-wrapper`
        ).style.display = 'none'
      }
    },
    async afterRead(file, e) {
      let index = e.index
      // console.log('fileList==', this.fileList)
      // console.log('index==', index)
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      const params = new FormData()
      params.append('file', file.file)
      params.append('directoryName', 'manage')
      const { code, data } = await uploadFile(params)
      if (code === '0') {
        // this.fileList[index].data = {
        //   fileId: data.id,
        //   fileName: data.uploadFileName,
        //   url: ''
        // }
        this.fileList[index].fileId = data.id
        this.fileList[index].fileName = data.uploadFileName
        this.fileList[index].url =
          '/manage/file/uploadFile.do?action=previewAsImage&fileId=' + data.id
        // 文件格式
        /*  [
          { fileId: '2309201603384650000', fileName: '报名照片.jpg' }
        ], */
        // const list = this.fileList.map((item) => item.data)
        let list = []
        this.fileList.forEach((item) => {
          list.push({
            fileId: item.fileId,
            fileName: item.fileName
          })
        })
        this.$emit('change', list)
      }
    },
    // 文件大小限制反馈
    onOversize(file) {
      console.log(file)
      this.$toast(`文件大小不能超过 ${this.maxSize}M`)
    },
    deleteFile() {
      let list = []
      this.fileList.forEach((item) => {
        list.push({
          fileId: item.fileId,
          fileName: item.fileName
        })
      })
      this.$emit('change', list)
    }
  }
}
</script>

<style scoped lang="scss">
.pick_wrap {
  .picker {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    opacity: 1;
    box-sizing: border-box;
    border: 0.5px solid #e2e7ec;
    background: #fff;
    font-size: 48px;
    text-align: center;
    line-height: 68px;
    color: #2163e0;
    font-weight: 300;
  }
}
:deep(.van-uploader__preview-image) {
  width: 72px !important;
  height: 72px !important;
  border-radius: 4px !important;
}
</style>
